<template>
    <el-dialog title="工单详细" v-model="open" width="800px" append-to-body @close="close">
              <el-row :gutter="20">
            <el-col :span="12" style="border-right:1px var(--el-border-color) var(--el-border-style)">
                <el-divider>审核记录</el-divider>
                <el-timeline style="max-width: 600px">
                    <el-timeline-item
                    v-for="(activity, index) in history"
                    :key="index"
                    :timestamp="activity.checkTime"
                    >
                    <dict-tag :options="flow_check_status" :value="activity.checkStatus"/> {{ activity.checkUserName }} : {{ activity.checkComment }}
                    </el-timeline-item>
                </el-timeline>
            </el-col>
            <el-col :span="12">
      <el-form ref="flowRef" :model="form" :rules="rules" label-width="80px" disabled>
        <el-form-item label="工单类别" prop="type">
          <el-input v-model="form.typeName" placeholder="请输入单号"/>
        </el-form-item>
        <el-form-item label="单号" prop="num">
          <el-input v-model="form.num" placeholder="请输入单号"/>
        </el-form-item>
        <el-form-item label="资产编码" prop="assetNum">
          <el-input v-model="form.assetNum" placeholder="请输入申请数量" />
        </el-form-item>
        <el-form-item label="资产分类" prop="cateName">
          <el-input v-model="form.cateName" placeholder="请输入资产分类" />
        </el-form-item>
        <el-form-item label="申请数量" prop="amount">
          <el-input v-model="form.amount" placeholder="请输入申请数量" />
        </el-form-item>
        <el-form-item label="申请部门" prop="deptName">
          <el-input v-model="form.deptName" placeholder="请输入申请部门" />
        </el-form-item>
        <el-form-item label="申请人" prop="userName">
          <el-input v-model="form.userName" placeholder="请输入申请人" />
        </el-form-item>
        <el-form-item label="申请原由" prop="reason">
          <el-input type="textarea" v-model="form.reason" placeholder="请输入申请原由" />
        </el-form-item>
        <el-form-item label="申请说明">
          <el-input type="textarea" v-model="form.content"/>
        </el-form-item>
        <el-form-item label="申请时间" prop="applyTime">
          <el-date-picker clearable
            v-model="form.applyTime"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择申请时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
            </el-col>
            </el-row>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="close">取 消</el-button>
        </div>
      </template>
    </el-dialog>
</template>

<script setup name="ViewDialog">
import { checkFlow, listFlowCheck } from "@/api/asset/flowCheck";
import { queryDs } from "@/api/dev/dataset";

const { proxy } = getCurrentInstance();
const { asset_flow_type, flow_check_status } = proxy.useDict('asset_flow_type', 'flow_check_status');
const emit = defineEmits();

const open = ref(false);


const props = defineProps({
  flowData: {
    type: Object,
    default: null
  }
});
const history = ref([]);


const data = reactive({
  form: {},
  rules: {
    checkStatus: [
        { required: true, message: "审核结果不能为空", trigger: "blur" }
    ],
    nextAction: [
        { required: true, message: "下一步操作不能为空", trigger: "blur" }
    ],
    userIds: [
        { required: true, message: "审核人不能为空", trigger: "blur" }
    ]
  }
});

const { form, rules } = toRefs(data);

function reset(){
    form.value = props.flowData;
    if(props.flowData){        
        listFlowCheck({flowId: props.flowData.id, checkStatus:'3', pageSize:100}).then(response=>{
            history.value = response.rows;
        });
    }else{
        history.value = [];
    }
}

watch(() => props.flowData, val => {
  if (val) {
   open.value = true;
  } else {
    open.value = false;
  }
  reset();
},{ deep: true, immediate: true });

function close(){
    emit("close");
}

reset();

</script>
